<template>
	<view bubble="true" :class="['n-icon-box', 'wy-hover-'+hover+'-n']" :style="boxStyle" :hover-class="'wy-hover-'+hover" @click.stop="toClickIcon">
		<image v-if="isImageSrc" class="n-image" :src="name" mode="aspectFill" :style="iconStyle"></image>
		<text v-else :class="['n-iconfont', 'wy-color-'+type, 'wy-size-'+size]" :style="iconStyle">{{icons[name]?icons[name]:name}}</text>
		<slot></slot>
	</view>
</template>

<script>
	/**
	 * icon
	 * @description 图标
	 * @property {Boolean} stop = [true|false] 是否允许穿透，默认true:不允许
	 * @property {String} name 字体图标的名字，允许是图片路径
	 * @property {String} type = [nav-title|nav-icon|nav-item|primary|success|warning|error|inverse|custom|link|text|second|third|forth|place|disabled] 图标的颜色主题
	 * @property {String} size = [ss|s|base|l|ll] 图标的尺寸主题
	 * @property {String} hover = [opacity|bg|bg-dark|bg-opacity|none] hover主题
	 * @property {String} iconStyle 图标或者图片样式
	 * @property {String} boxStyle 外层样式
	 * @event {Function} iconClicked 点击事件
	 */
	// #ifdef APP-NVUE
	 
    const fontUrl = 'https://at.alicdn.com/t/font_533566_yfq2d9wdij.ttf' 
    const domModule = weex.requireModule('dom')
    domModule.addRule('fontFace', {
    	'fontFamily': "cuIcon",
    	'src': `url('${fontUrl}')`
    })
	// #endif
	
	import icons from './icons.js'
	var wy=uni.wy;
	var pubfn=wy.pubfn; 
	var isSrc=pubfn.IsURL; 
	export default {
		name: 'wy-icon',
		props: {
			/**
			 * 是否允许穿透
			 */
			stop: {
				type: Boolean,
				default: true
			},
			/**
			 * 字体图标的名字，允许是图片路径
			 */
			name: {
				type: String,
				default: 'right'
			},
			/**
			 * 图标的颜色主题
			 */
			type: {
				type: String,
				default: 'text'
			},
			/**
			 * 图标的尺寸主题
			 */
			size: {
				type: String,
				default: 'base'
			},
			/**
			 * hover主题
			 */
			hover: {
				type: String,
				default: ''
			},
			/**
			 * 图标或者图片样式
			 */
			iconStyle: {
				type: String,
				default: ""
			},
			/**
			 * 外层样式
			 */
			boxStyle: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				icons: icons
			}
		},
		computed: {
			isImageSrc() {
				const isUrlSrc = isSrc(this.name)
				if (isUrlSrc) {
					return true
				}
				const last_len = this.name.lastIndexOf(".");
				if (last_len > 0) {
					const len = this.name.length;
					const ext = this.name.substring(last_len,len)
					return ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.bmp', '.svg'].includes(ext.toLowerCase())
				}
				return false
			}
		},
		methods: {
			toClickIcon(e) {
				this.$emit("iconClicked", e)
				this.stop && e.stopPropagation && e.stopPropagation()
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifndef APP-NVUE */
	@font-face {
		font-family: "cuIcon"; 
		src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831');
		/* IE9*/
		src: url('//at.alicdn.com/t/font_533566_yfq2d9wdij.eot?t=1545239985831#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('//at.alicdn.com/t/font_533566_yfq2d9wdij.ttf?t=1545239985831') format('truetype'),
			/* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
			url('//at.alicdn.com/t/font_533566_yfq2d9wdij.svg?t=1545239985831#cuIconfont') format('svg');
		/* iOS 4.1- */
	}
	/* #endif */
	
	.n-iconfont {
		font-family: cuIcon;
		text-decoration: none;
		text-align: center;
	}
	.n-icon-box {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		box-sizing: border-box;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
	.n-image {
		width: 32rpx;
		height: 32rpx;
	}
</style>
